<script setup lang="ts">
import {findUserShareFIleDataApi,userShareFIleType,entryFolderFileApi} from './api/ShareFile.ts'
import {onMounted,ref} from "vue";
import {digElMessage} from "../common/Message.ts";
import {BottomRight,Bottom
} from '@element-plus/icons-vue'

// @ts-ignore
import { saveAs } from 'file-saver'
let props=defineProps<{
  fid:string,
  uid:string,
  type:number,
  username:string

}>()



let fileData=ref<Array<userShareFIleType>>([]);


let data={
   fid:props.fid,
   uid:props.uid,
   type:props.type
}




let folderimgurl=ref("/logo/img.png");


const getData=async ()=>{
  await findUserShareFIleDataApi(data).then(res=>{
     if(res.code=='00000'){
       fileData.value=res.data;
     }
  })
}
//进入文件夹
//控制返回

//存储对应的父文件夹id key当前文件夹id value 文件夹id
let map=new Map<String,string>;

let showCo=ref(false);
//存储父文件夹id
//存储当前文件夹id
let curFolderId=ref(JSON.parse(JSON.stringify(props.fid)));
const entryFolder=async (e:userShareFIleType)=>{


  let key=JSON.parse(JSON.stringify(e.foldId));
  let value=JSON.parse(JSON.stringify(curFolderId.value));
  curFolderId.value=e.foldId!;


  if(map.get(key)==undefined){
    map.set(key,value)
  }



  let quere={
    fid:curFolderId.value!,
    uid:props.uid,
  }

  await entryFolderFileApi(quere).then(res=>{
     if(res.code=='00000'){
       fileData.value=res.data

       showCo.value=true
     }
  })

 // console.log(map)

}

//返回上一级

const back=async ()=>{

  let key=JSON.parse(JSON.stringify(curFolderId.value));
  let rootParent= map.get(key);
  if(rootParent==undefined){
      digElMessage("文件为空不能返回","warning",1000)
    showCo.value=false
    return;
  }
  if(rootParent!=curFolderId.value){
    curFolderId.value=rootParent;

    let quere={
      fid:curFolderId.value!,
      uid:props.uid,
    }

    await entryFolderFileApi(quere).then(res=>{
      if(res.code=='00000'){
        fileData.value=res.data
      }
    })
  }
  else{
    let quere={
      fid:curFolderId.value!,
      uid:props.uid,
      type:props.type
    }
    await findUserShareFIleDataApi(quere).then(res=>{

      showCo.value=false
      if(res.code=='00000'){
        fileData.value=res.data;
      }
    })

  }



}

//下载

const dowm=(e:userShareFIleType)=>{
  saveAs(e.filePath!,e.fileName)
}

onMounted(()=>{
  getData()
})
</script>

<template>

  <div class="btn">



  <el-card style="max-width: 40vw" >
    <template #header>
      <div class="card-header">
        <div><el-text>来自{{props.username}}的分享</el-text></div>
       <div><el-button type="primary" v-if="showCo" text @click="back">返回上一级</el-button></div>

      </div>
    </template>
    <el-row class="center">

      <el-col v-if="fileData.length>0" v-for=" item in fileData" :key="item">
            <div><el-image  v-if="item.foldId" :src="folderimgurl"></el-image></div>
            <div><el-text> {{item.fileName?item.fileName:item.foldName}}</el-text></div>
             <div class="center-do">
                 <el-button  v-if="item.foldId" text circle type="primary" :icon="BottomRight" @click="entryFolder(item)">进入</el-button>
               <el-button v-if="item.filePath" text circle type="success" :icon="Bottom" @click="dowm(item)">下载</el-button>
             </div>
      </el-col>
    </el-row>

    <el-empty v-if="fileData.length<=0" image-size="200" description="文件已经取消分享"/>
  </el-card>

  </div>
</template>

<style scoped lang="less">

.btn{
  position: relative;
    .el-card{
      position: absolute;
      text-align:center;
      top:10vh;
      left: 40vw;

    }
}
 .center{
   width: 300px;


     .el-col{
       width: 100%;
       height: 40px;
       display: flex;
       align-items: flex-start;
       border-bottom: solid rebeccapurple 1px;
       div{
         .el-image{
           height: 30px;
           width: 30px;
         }
         .el-text{

           line-height: 40px;
           margin-left: 10px;
         }

       }

       .center-do{
         margin-left: 50px;
         .el-button{
           line-height: 40px;
         }
       }

     }

 }
</style>